<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getProductCategoryListApi, getProductListByCategoryIdApi } from '@/services'
import type { Category, Product } from '@/types'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
import { useCartStore } from '@/stores/modules/cart.ts'
const cartStore = useCartStore()
const active = ref(0)

// 获取商品分类列表
const productCategoryList = ref<Category[]>([])
const getProductCategoryList = async () => {
  const res = await getProductCategoryListApi()
  if (res.code === 0) {
    productCategoryList.value = res.data
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}

// 获取商品列表
// const getProductList = async () => {
//   const res = await getProductListApi()
//   console.log(res)
//   if (res.code === 0) {
//     productList.value = res.data
//   } else {
//     uni.showToast({
//       title: res.msg,
//       icon: 'none',
//     })
//   }
// }

// 根据分类id获取商品列表
const productList = ref<Product[]>([])
const ChangeCategory = async (index: number, id: number) => {
  active.value = index
  const res = await getProductListByCategoryIdApi(id)
  if (res.code === 0) {
    productList.value = res.data
    productList.value.forEach((item) => {
      item.isSelected = true
      item.count = 0
    })
  } else {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
  // 获取购物车中的每个商品的数量
  cartCount()
}

//修改数字
const changeNumber = (e: Product) => {
  // 判断是否登录
  if (!memberStore.profile) {
    setTimeout(() => {
      uni.showToast({
        title: '请先登录',
        icon: 'none',
      })
    }, 1000)
    return uni.switchTab({
      url: '/pages/login/login',
    })
  }
  cartStore.updateCart(e)
}

// 获取购物车中的每个商品的数量
const cartCount = () => {
  productList.value.forEach((item) => {
    cartStore.cartList.forEach((cartItem: Product) => {
      if (cartItem.id === item.id) {
        item.count = cartItem.count
        item.isSelected = true
      }
    })
  })
}

onShow(async () => {
  await getProductCategoryList()
  await Promise.all([ChangeCategory(0, productCategoryList.value[0].id)])
})
</script>

<template>
  <view class="scroll-view-container">
    <!-- 左侧的滚动视图区域 -->
    <scroll-view class="left-scroll-view" scroll-y>
      <view v-for="(item, i) in productCategoryList" :key="item.id">
        <view
          class="left-scroll-view-item"
          :class="[i === active ? 'active' : '']"
          @click="ChangeCategory(i, item.id)"
          >{{ item.name }}
        </view>
      </view>
    </scroll-view>
    <!-- 右侧的滚动视图区域 -->
    <scroll-view class="right-scroll-view" scroll-y>
      <view class="cate-lv2" v-for="item in productList" :key="item.id">
        <view class="cate-lv2-title">
          <view class="cate-lv3-list">
            <view class="cate-lv3-item">
              <image :src="item.image"></image>
              <text>{{ item.name }}</text>
              <vk-data-input-number-box
                v-model="item.count"
                class="input-number"
                :index="item.id"
                :min="0"
                :max="10"
                @change="changeNumber(item)"
              ></vk-data-input-number-box>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.scroll-view-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #fff;

  .left-scroll-view {
    flex: 0 0 30%;
    height: 100%;
    background-color: #f7f7f7;
    padding: 10px 0;

    .left-scroll-view-item {
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      transition: all 0.3s;

      &.active {
        background-color: #ffffff;
        font-weight: bold;
        color: #27ba9b;
        position: relative;

        &::before {
          content: ' ';
          display: block;
          width: 3px;
          height: 30px;
          background-color: #27ba9b;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .right-scroll-view {
    flex: 0 0 70%;
    height: 100%;
    padding: 15px;

    .cate-lv2-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      text-align: center;
      padding: 10px 0;
      position: relative;

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 20%;
      }

      &::before {
        left: 10%;
      }

      &::after {
        right: 10%;
      }
    }

    .cate-lv3-list {
      display: flex;
      flex-direction: column;
      gap: 15px;

      .cate-lv3-item {
        width: 100%;
        display: flex;
        //align-items: center;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        .input-number {
          display: flex;
          bottom: 10px;
          position: absolute;
          right: 0;
        }
        .input-plus {
          display: flex;
          bottom: 10px;
          position: absolute;
          right: 0;
          width: 40rpx;
          height: 40rpx;
        }

        image {
          width: 80px;
          height: 80px;
          margin-right: 15px;
          flex-shrink: 0;
        }

        text {
          font-size: 15px;
          color: #444;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
